<!--  活动模版-->
<template>
  <a-card :bordered='false'>
    <!-- 查询区域 -->
    <search ref='search' :config='searchConfig' @getHeight='getHeight' @search='search' />
    <!-- table区域-begin -->
    <div class='page_table'>
      <vxe-grid
        ref='xGrid'
        v-bind='vexConfig'
        :align='left'
        :border='true'
        :checkbox-config='checkboxConfig'
        :columns='columns'
        :data='dataSource'
        :height='pageHeight-seachHeight-94'
        :loading='loading'
        :resizable='true'
        :showOverflow='true'
        :toolbar-config='tableToolbar'
        size='mini'
        @checkbox-change='selectChangeEvent'
        @checkbox-all='selectChangeEvent'
      >
        <template #toolbar_buttons>
          <!-- 操作按钮区域 -->
          <div class='table-operator'>
            <a-button type='primary' @click='handleAdd'>新增</a-button>
            <a-button :disabled='selectedRowKeys.length !== 1' type='primary' @click='handleCopy'>复制</a-button>
            <a-button type='primary' @click='batchDel'>删除</a-button>
            <a-button type='primary' @click="stateChange(1)">启用</a-button>
            <a-button type='primary' @click="stateChange(0)">禁用</a-button>
          </div>
        </template>
        <template #ruleCode='{ row,rowIndex }'>
          <a @click='handleDetail(row)'>{{ row.ruleCode }}</a>
        </template>
        <template #status='{ row }'>
          <a-switch :checked="row.status" size="small" @change="handleStatus(row,$event)"/>
        </template>
        <template #action='{ row:record }'>
          <a @click='handleSeeDetail(record)'>核对明细</a>
        </template>
        <template #pager>
          <vxe-pager
            :currentPage.sync='ipagination.current'
            :layouts="['Total', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump','Sizes', 'FullJump']"
            :page-size.sync='ipagination.pageSize'
            :pageSizes='ipagination.pageSizeOptions'
            :total='ipagination.total'
            @page-change='handlePageChange'>
          </vxe-pager>
        </template>
      </vxe-grid>
    </div>
    <!-- table区域-end -->
    <cust-rules-add ref='modalForm' @ok='modalFormOk'></cust-rules-add>
    <rules-by-cust-detail ref='detailForm'></rules-by-cust-detail>
  </a-card>
</template>

<script>
import { PageListMixin } from '@/mixins/PageListMixin'
import JEllipsis from '@/components/cn-form/JEllipsis'
import { getAction, postAction } from '@api/manage'
import custRulesAdd from './model/custRulesAdd'
import rulesByCustDetail from '@views/tmr/budget/model/rulesByCustDetail'

export default {
  name: 'activityTemplate',
  mixins: [PageListMixin],
  components: {
    custRulesAdd, JEllipsis, rulesByCustDetail
  },
  data() {
    return {
      description: '客户预算政策',
      searchConfig: [
        {
          type: 'input',
          name: 'ruleCode',
          placeholder: '规则编码'
        }, {
          // label:'业务员',
          type: 'input',
          name: 'ruleName',
          placeholder: '规则名称'
        },
        {
          type: 'date-range',
          name: 'date',
          range: ['startDate', 'endDate'],
          placeholder: ['有效期开始时间', '有效期结束时间']
        },
        {
          // label:'订单状态',
          type: 'j-select',
          dictCode: 'rule_type',
          name: 'ruleType',
          placeholder: '规则类型'
        },
        {
          type: 'a-select',
          name: 'status',
          placeholder: '状态',
          option: [
            {
              name: '启用',
              value: 1
            },
            {
              name: '停用',
              value: 0
            }]
        }
      ],
      // 表头
      columns: [
        { type: 'checkbox', width: 60, fixed: 'left' },
        {
          title: '规则编码',
          fixed: 'left',
          field: 'ruleCode',
          minWidth: 120,
          slots: { default: 'ruleCode' }
        },
        {
          title: '规则名称',
          field: 'ruleName',
          minWidth: 120,
          // slots: { default: 'ruleName' },
        },
        {
          title: '规则类型',
          minWidth: 120,
          field: 'ruleTypeStr'
        },

        {
          title: '返利金额',
          minWidth: 80,
          field: 'amount'

        },
        {
          title: '活动预算金额',
          minWidth: 120,
          field: 'budgetAmount'

        },
        {
          title: '随车促销金额',
          minWidth: 100,
          field: 'promtionAmount'

        },
        {
          title: '开始日期',
          minWidth: 100,
          field: 'startDate'

        },
        {
          title: '结束日期',
          minWidth: 120,
          field: 'endDate'

        },
        {
          title: '规则描述',
          minWidth: 120,
          field: 'remarks',
          // slots: { default: 'remarks' },
        },
        {
          title: '创建人',
          minWidth: 80,
          field: 'createName'

        },
        {
          title: '创建时间',
          minWidth: 80,
          field: 'createTime'
        },
        {
          title: '更新人',
          minWidth: 80,
          field: 'updateName'

        },
        {
          title: '更新时间',
          minWidth: 80,
          field: 'updateTime'
        },
        {
          title: '核对状态',
          minWidth: 80,
          field: 'isCheckStr'
        },
        {
          title: '状态',
          field: 'status',
          fixed: 'right',
          minWidth: 80,
          slots: { default: 'status' },
          // customRender: (r) => {
          //   let vm = this
          //   let child = vm.$createElement('p', {
          //     domProps: {
          //       innerHTML: r == '009' ? '启用' : '停用'
          //     },
          //     style: {
          //       color: r == '009' ? 'black' : 'red'
          //     }
          //   })
          //   const obj = {
          //     children: child,
          //     attrs: {}
          //   }
          //   return child
          // }
        },
        {
          title: '操作',
          field: 'action',
          minWidth: 110,
          fixed: 'right',
          slots: { default: 'action' },
        }
      ],


      url: {
        // 列表接口
        list: window._CONFIG['domianTpmURL'] + '/tpmBudgetRule/findPageList',
        // 详情接口
        detail: window._CONFIG['domianTpmURL'] + '/tpmBudgetRule/getInfo',
        copy: window._CONFIG['domianTpmURL'] + '/tpmBudgetRule/getInfoCopy',
        // 导出接口
        // exportXlsUrl: window._CONFIG['domianTpmURL']+"budget/tpmBudgetFee/exportXls",
        // 删除接口
        deleteBatch: window._CONFIG['domianTpmURL'] + '/tpmBudgetRule/deleteBatch',
        // 启停用接口
        status: window._CONFIG['domianTpmURL'] + '/tpmBudgetRule/startOrStop',
        startOrStopUrl: window._CONFIG['domianTpmURL'] + '/tpmBudgetRule/startOrStop',
      }
    }
  },
  created() {

  },


  watch: {},
  computed: {
    importExcelUrl: function() {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    }
  },
  methods: {
    handleSeeDetail(record) {
      this.$refs.detailForm.edit({ ...record })
      this.$refs.detailForm.disableSubmit = false
    },
    handleCopy: async function() {
      let record = this.selectionRows[0]
      if (this.url.detail) {
        const res = await getAction(this.url.copy, { id: record.id, proCode: '' })
        if (res && res.result) {
          record = res.result
        } else {
          this.$message.error(res.message)
        }
      }
      this.$refs.modalForm.edit(record)
      this.$refs.modalForm.title = '复制'
      this.$refs.modalForm.disableSubmit = false
    },
    handleDetail: async function(record) {
      if (this.url.detail) {
        const res = await getAction(this.url.detail, { id: record.id })
        if (res && res.result) {
          record = res.result
        } else {
          this.$message.error(res.message)
        }
      }
      this.$refs.modalForm.title = '查看'
      this.$refs.modalForm.edit(record)

      this.$refs.modalForm.disableSubmit = true
    }
  }
}
</script>

<style lang='less' scoped>
@import '~@assets/less/common.less';

/deep/ .ant-pagination {
  float: right;
}

///deep/ .resize-table-th {
//  position: relative;
//}
///deep/ .table-draggable-handle {
//  height: 100% !important;
//  bottom: 0;
//  left: auto !important;
//  right: -5px;
//  cursor: col-resize;
//  touch-action: none;
//}
.red{
  color:red
}

</style>